<template>
  <div style="margin: 20px">
    <el-form :inline="true" :model="formInline" class="form-inline">
      <el-form-item label="部门">
        <el-select
            v-model="formInline.deptId"
            placeholder="选择部门"
            clearable
        >
          <el-option
              v-for="item in deptData"
              :key="item.id"
              :label="item.deptName"
              :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="工号">
        <el-input v-model="formInline.jobNumber" placeholder="请输入完整的工号" clearable/>
      </el-form-item>
      <el-form-item label="身份证号">
        <el-input v-model="formInline.userIdNumber" placeholder="请输入完整的身份证号码" clearable/>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="formInline.userName" placeholder="根据姓名模糊查询" clearable/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="queryUserBasicSubmit">查询</el-button>
<!--        <el-button type="primary" @click="handleAdd">新增</el-button>-->
        <el-button type="primary" @click="handleExport">全量导出</el-button>
        <a hidden="hidden" ref="handleExportLink" :href="handleExportHref"></a>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" v-loading="tableLoading" stripe style="width: 100%; height: 80%">
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column prop="deptName" label="部门" :show-overflow-tooltip="true"/>
      <el-table-column prop="userName" label="姓名"/>
      <el-table-column prop="userIdNumber" label="身份证" :show-overflow-tooltip="true" width="180"/>
      <el-table-column prop="jobNumber" label="工号" width="100"/>
<!--      <el-table-column prop="userSex" label="性别" width="70"/>-->
<!--      <el-table-column prop="userBirthday" label="出生年月"/>-->
<!--      <el-table-column prop="userNation" label="民族" width="70"/>-->
<!--          <el-table-column prop="userNativePlace" label="籍贯" width="100"/>-->
          <el-table-column prop="userPoliticalStatus" label="政治面貌" width="100"/>
          <el-table-column prop="userArrivalDate" label="来校时间" width="100"/>
<!--          <el-table-column prop="userCategory" label="身份类别" width="100"/>-->
<!--          <el-table-column prop="userStorageStatus" label="是否入库" width="80"/>-->
<!--          <el-table-column prop="userPhone" label="移动电话"/>-->
<!--          <el-table-column prop="userFileStatus" label="档案" width="80"/>-->
<!--          <el-table-column prop="highestEducation" label="最高学历" width="80"/>-->
      <!--    <el-table-column prop="highestDegree" label="最高学位" width="80"/>-->
      <!--    <el-table-column prop="highestSchool" label="获取院校"/>-->
      <!--    <el-table-column prop="highestCollege" label="获取学院"/>-->
      <!--    <el-table-column prop="highestMajor" label="毕业专业"/>-->
<!--          <el-table-column prop="graduationTime" label="毕业时间"/>-->
<!--          <el-table-column prop="workStartDate" label="工作时间"/>-->
      <!--    <el-table-column prop="workYearCount" label="年限" width="50"/>-->

      <el-table-column label="操作" >
        <template #default="scope">
          <el-button size="small" @click="handleDetail(scope.$index, scope.row)">
            详情
          </el-button>
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
            编辑
          </el-button>
<!--          <el-button-->
<!--              size="small"-->
<!--              type="danger"-->
<!--              @click="handleDelete(scope.$index, scope.row)"-->
<!--          >-->
<!--            删除-->
<!--          </el-button>-->
          <el-button
              size="small"
              type="warning"
              @click="handleAgreement(scope.$index, scope.row)"
          >
            协议
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="demo-pagination-block">
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next"
          v-model:total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref, onMounted, reactive} from 'vue';
import base from '@/api/base.js';
import {ElMessage, ElMessageBox} from 'element-plus'
import UserBasic from '@/api/UserBasic.js';
import Dept from "@/api/Dept.js";
import { useRouter } from 'vue-router'

const router = useRouter()

const deptData = ref([]);
const tableData = ref([]);


const tableLoading = ref(false)

const handleDetail = (index, row) => {
  const id = row.id;
  router.push({ name: 'userBasicDetail', query: { userId:id } });
}

const handleEdit = (index, row) => {
  const id = row.id;
  router.push({ name: 'userBasicEdit', query: { userId:id } });
}

const handleAgreement = (index, row) => {
  const id = row.id;
  router.push({ name: 'userBasicAgreement', query: { userId:id } });
}

const handleAdd = () => {
  router.push({ name: 'userBasicAdd' });
}

const handleExportLink = ref(null);
let handleExportHref = `${base.context}/userBasic/exportUserBasic?`
const handleExport = () => {
  handleExportLink.value.click();
}
const handleDelete = (index, row) => {
  ElMessageBox.confirm(
      '数据将彻底删除，是否继续？',
      'Warning',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        let data = {};
        data.id = row.id
        UserBasic.deleteUserBasic(data)
            .then(res => {
              ElMessage.success('删除成功')
              listUserBasic(formInline)
            })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消',
        })
      })
}

const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

const formInline = reactive({
  deptId: '',
  pageNo: currentPage.value,
  pageSize: pageSize.value,
  jobNumber: '',
  userIdNumber: '',
  userName: '',
})

const queryUserBasicSubmit = () => {
  listUserBasic(formInline)
}

onMounted(() => {
  listUserBasic(formInline)
  listAllDept()

});

const handleSizeChange = (val: number) => {
  formInline.pageSize = val;
  listUserBasic(formInline)
}
const handleCurrentChange = (val: number) => {
  formInline.pageNo = val;
  listUserBasic(formInline)
}


const listAllDept = () => {
  Dept.listAllDept()
      .then(res => {
        deptData.value = res.data
      })
};

const listUserBasic = (data) => {
  tableLoading.value = true

  UserBasic.listUserBasic(data)
      .then(res => {
        currentPage.value = res.data.pageNo
        pageSize.value = res.data.pageSize
        total.value = res.data.recordsTotal
        tableData.value = res.data.rows
        tableLoading.value = false
      })
      .catch(error => {
        tableLoading.value = false
      })
};

</script>

<style scoped>
.form-inline {
  margin: 20px;
}
.form-inline .el-input {
  --el-input-width: 200px;
}

.form-inline .el-select {
  --el-select-width: 200px;
}
</style>